<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ include file="common/jsp/include.jsp"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>支付平台</title>
<link rel="stylesheet" type="text/css" href="common/lib/zTree/zTreeStyle/zTreeStyle.css"/>
<script type="text/javascript" src="common/lib/zTree/jquery.ztree.min.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height: 80px; padding: 0px;background-color: #67b9e4;font-size:20px">
    	<img src="images/logo.png" alt="" /><font color="#ffffff">支付管理平台</font>
</div>
<div data-options="region:'west',split:true,title:'操作菜单'" style="width: 200px; padding: 10px;">
    <ul id="webMenu_list" class="ztree" style="display: ;">
    </ul>
</div>
<div data-options="region:'center',title:'',border:false">
    <div id="tt" class="easyui-tabs" data-options="fit:true">
        <div title="首页" style="background-color: #D0EAF9">
           <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" style="background:url(images/welcome_bg.jpg) left center; background-repeat:repeat-x">
			  <tr height="*">
			    <td align="center" valign="middle" style="padding-bottom:40px"><img src="images/conPic.png"></td>
			  </tr>
			</table>
        </div>
    </div>
</div>
<div id="mm" class="easyui-menu" style="width:120px;">
    <div id="mm-tabclosrefresh" data-options="name:6">刷新</div>
    <div id="mm-tabclose" data-options="name:1">关闭</div>
    <div id="mm-tabcloseall" data-options="name:2">全部关闭</div>
    <div id="mm-tabcloseother" data-options="name:3">除此之外全部关闭</div>
    <div class="menu-sep"></div>
    <div id="mm-tabcloseright" data-options="name:4">当前页右侧全部关闭</div>
    <div id="mm-tabcloseleft" data-options="name:5">当前页左侧全部关闭</div>
</div>
<script type="text/javascript">


    //添加Tabs
    function addTabs(event, treeId, treeNode, clickFlag) {
        if (!$("#tt").tabs('exists', treeNode.name)) {
            $('#tt').tabs('add', {
                id: treeId,
                title: treeNode.name,
                selected: true,
                content:'<iframe scrolling="auto" src="'+treeNode.dataurl+'" frameborder="0" style="width:100%;height:100%;"></iframe>',  
                closable: true
            });
        } else $('#tt').tabs('select', treeNode.name);
    }

    //删除Tabs
    function closeTab(menu, type) {
        var allTabs = $("#tt").tabs('tabs');
        var allTabtitle = [];
        $.each(allTabs, function (i, n) {
            var opt = $(n).panel('options');
            if (opt.closable)
                allTabtitle.push(opt.title);
        });
        var curTabTitle = $(menu).data("tabTitle");
        var curTabIndex = $("#tt").tabs("getTabIndex", $("#tt").tabs("getTab", curTabTitle));
        switch (type) {
            case 1:
                $("#tt").tabs("close", curTabIndex);
                return false;
                break;
            case 2:
                for (var i = 0; i < allTabtitle.length; i++) {
                    $('#tt').tabs('close', allTabtitle[i]);
                }
                break;
            case 3:
                for (var i = 0; i < allTabtitle.length; i++) {
                    if (curTabTitle != allTabtitle[i])
                        $('#tt').tabs('close', allTabtitle[i]);
                }
                $('#tt').tabs('select', curTabTitle);
                break;
            case 4:
                for (var i = curTabIndex; i < allTabtitle.length; i++) {
                    $('#tt').tabs('close', allTabtitle[i]);
                }
                $('#tt').tabs('select', curTabTitle);
                break;
            case 5:
                for (var i = 0; i < curTabIndex-1; i++) {
                    $('#tt').tabs('close', allTabtitle[i]);
                }
                $('#tt').tabs('select', curTabTitle);
                break;
            case 6: //刷新
                var panel = $("#tt").tabs("getTab", curTabTitle).panel("refresh");
                break;
        }
    }

    $(document).ready(function () {
        //监听右键事件，创建右键菜单
        $('#tt').tabs({
            onContextMenu: function (e, title, index) {
                e.preventDefault();
                if (index > 0) {
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    }).data("tabTitle", title);
                }
            }
        });
        //右键菜单click
        $("#mm").menu({
            onClick: function (item) {
                closeTab(this, item.name);
            }
        });
        //treeNodes
        var zNodes = [
            {id: 11, pId: 1, name: "商户配置", dataurl: basePath+"accessConfig.action", target: "_self"},
            {id: 12, pId: 1, name: "白名单配置", dataurl: basePath+"whiteListConfig.action", target: "_self"},
            {id: 13, pId: 1, name: "订单列表", dataurl: basePath+"Order.action", target: "_self"}
        ];

        var setting = {
            view: {
                selectedMulti: false
            },
            callback: {
                onClick: addTabs
            }
        };

        $.fn.zTree.init($("#webMenu_list"), setting, zNodes);

    });
</script>
</body>
</html>
